<template>
  <div id="remark-footer">
    <div class="remark-main" @click="showBase">
      <div v-show="submitShow===true" class="note-icon flex-box">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-diary-pinglun2"></use>
        </svg>
      </div>
      <input type="text"
        name="remark"
        v-model="message"
        ref="remarkbox"
        id="remark"
        @focus="remarkActive">
      <div class="remark-icons flex-box" v-show="submitShow===false">
        <span>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-diary-pinglun1"></use>
          </svg>
        </span>
        <span>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-diary-dianzan"></use>
          </svg>
        </span>
        <span>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-diary-shoucang"></use>
          </svg>
        </span>
      </div>
      <button
        class="submit"
        :class="{ 'submit-active' : submitActive }"
        @click="submitMsg"
        v-show="submitShow===true"
      >发送</button>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
export default {
  name: 'Footer',
  data() {
    return {
      submitShow: false,
      submitActive: false,
      message: ''
    }
  },
  computed: {
    ...mapState(['isLogin'])
  },
  watch: {
    message: {
      handler: function() {
        if (this.message.trim() === '') {
          this.submitActive = false
        } else {
          this.submitActive = true
        }
      }
    }
  },
  methods: {
    ...mapActions(['loginAction']),
    showBase(event) {
      event = event || window.event
      event.stopPropagation()
    },
    remarkActive() {
      // console.log(this.$route);
      if (this.$store.state.isLogin === 0) {
        this.$refs.remarkbox.blur()
        setTimeout(() => {
          this.$router.push('/logPage')
        }, 0)
      } else {
        this.submitShow = true
      }
    },
    submitMsg() {
      if (this.message.trim() === '') {
        return false
      } else {
        console.log(455)
        this.$axios({
          method: 'post',
          url: '/api/?s=App.Market_Message.Post',
          params: {
            uuid: this.$store.state.userInfo.uuid,
            token: this.$store.state.userInfo.token,
            message_content: this.message,
            message_nickname: this.$store.state.userInfo.userName,
            message_key: this.$route.params.articleDetail,
            message_pid: 0,
            more_data: JSON.stringify({
              message_like: 0,
              message_uuid: '5CC188FA8886C45594E69ED46406FE90'
            }),
            app_key: this.$APPKEY.app_key
          },
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        })
          .then(data => {
            console.log(data)
            if (data.data.ret === 200 && data.data.data.err_code === 0) {
              this.loginAction(1)
              this.$emit('reviewMessage')
              this.submitShow = false
              this.$refs.remarkbox.blur()
              this.message = ''
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    }
  },
  mounted() {
    document.addEventListener('click', () => {
      // this.$refs.remarkbox.blur()
      this.submitShow = false
    })
    // console.log(this.$route.params.articleDetail);
    console.log(this.$store.state.userInfo)
  }
}
</script>
<style lang="scss" scoped>
#remark-footer {
  width: 100%;
  height: 45px;
  background: #fff;
  position: fixed;
  bottom: 0;
  margin-top: -45px;
  left: 0;
  z-index: 9999;
  border-top: 1px solid rgba($color: #000000, $alpha: 0.06);
  .remark-main {
    width: 100%;
    height: 100%;
    #remark {
      width: 230px;
      height: 24px;
      margin-top: 10px;
      margin-left: 12px;
      float: left;
      padding-left: 12px;
      padding-right: 12px;
      box-sizing: border-box;
      border-radius: 50px;
      border: 1px solid #eee;
      background: #fafafa;
    }
    .note-icon {
      width: 30px;
      height: 100%;
      float: left;
      font-size: 24px;
      margin-left: 12px;
      margin-right: -3px;
    }
    .remark-icons {
      width: 130px;
      font-size: 21px;
      color: #999;
      height: 100%;
      float: left;
      span {
        margin-right: 12px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .submit {
      width: 60px;
      padding: 3px 16px 3px 16px;
      background: #ccc;
      color: #fff;
      border: none;
      border-radius: 3px;
      margin-top: 10px;
    }
    .submit-active {
      background: #1ba1f6;
    }
  }
}
</style>
